<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页| Brook - Spring Security</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

    <style>
        body {
            margin: 0;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            background: #222;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .world {
            -webkit-perspective: 800px;
            perspective: 800px;
            width: 100vh;
            height: 100vh;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .cube {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            width: 50vh;
            height: 50vh;
            position: relative;
            -webkit-animation: rotator 4.5s linear infinite;
            animation: rotator 4.5s linear infinite;
            outline: 0;
        }
        .cube * {
            background: #000;
            box-shadow: 0 0 3vh currentColor;
            -webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
            transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }
        .cube:hover * {
            background: currentColor;
            box-shadow: 0 0 20vh currentColor;
        }
        .cube .cube__front {
            color: deeppink;
            -webkit-transform: translateZ(25vh);
            transform: translateZ(25vh);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cube .cube__right {
            color: lightcoral;
            -webkit-transform: rotateY(90deg) translateZ(25vh);
            transform: rotateY(90deg) translateZ(25vh);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cube .cube__left {
            color: skyblue;
            -webkit-transform: rotateY(270deg) translateZ(25vh);
            transform: rotateY(270deg) translateZ(25vh);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cube .cube__back {
            color: seagreen;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -webkit-transform: rotateY(180deg) translateZ(25vh);
            transform: rotateY(180deg) translateZ(25vh);
        }
        .cube .cube__top {
            color: mediumseagreen;
            -webkit-transform: rotateX(90deg) translateZ(25vh);
            transform: rotateX(90deg) translateZ(25vh);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cube .cube__bottom {
            color: dodgerblue;
            -webkit-transform: rotateX(270deg) translateZ(25vh);
            transform: rotateX(270deg) translateZ(25vh);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        @-webkit-keyframes rotator {
            0% {
                -webkit-transform: rotateX(0deg) rotateY(0deg);
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateX(360deg) rotateY(360deg);
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @keyframes rotator {
            0% {
                -webkit-transform: rotateX(0deg) rotateY(0deg);
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                -webkit-transform: rotateX(360deg) rotateY(360deg);
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>

</head>

<body style="background-color: #222222; padding-bottom: 0">

<div th:insert="~{header :: nav}"></div>

<div class="world">
    <div class="cube" tabindex="0">
        <div class="cube__front"></div>
        <div class="cube__back"></div>
        <div class="cube__left"></div>
        <div class="cube__right"></div>
        <div class="cube__top"></div>
        <div class="cube__bottom"></div>
    </div>
</div>

</body>

</html>
